<template>
  <div id="space-issues-update" v-if="Object.keys(curIssue).length">
    <div class="main-container container-limited container-fluid page-holder">
      <issues-breadcrumb />
      <div class="page-title-holder no-border-bottom">
        <h2 class="page-title">编辑问题</h2>
      </div>
      <el-form v-if="form.title" ref="issueUpdateForm" label-position="top" class="bold-label"
               :model="form" :rules="rules">
        <el-form-item label="问题标题" prop="title" ref="title">
          <el-input placeholder="请输入问题标题" v-model="form.title" maxlength="100" show-word-limit/>
        </el-form-item>
        <el-form-item label="问题描述" prop="content" ref="content">
          <tinymce-editor v-model="form.content" :height="550" />
<!--          <el-input v-show="false" v-model="form.content"/>-->
<!--          <ckeditor :initial-content="form.content" :content.sync="form.content"/>-->
        </el-form-item>
<!--        <el-form-item label="特别提醒">-->
<!--          <UserSelect :selected-users.sync="form.selectedUsers"></UserSelect>-->
<!--        </el-form-item>-->
        <el-form-item label="添加标签">
          <TagSelect :selected-tags.sync="form.tags"/>
        </el-form-item>
        <el-form-item>
          <div class="submit-button-deep">
            <el-button type="primary" @click="onSubmit" :loading="isLoading">保存修改</el-button>
            <el-button @click="goBack">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import IssuesBreadcrumb from '@/views/issues/components/breadcrumb';
import UserSelect from '@/components/shared/UserSelect';
import TagSelect from '@/components/shared/TagSelect';
import * as format from './format';

export default {
  name: 'IssuesUpdate', // 编辑问题
  components: { IssuesBreadcrumb, UserSelect, TagSelect },
  data() {
    return {
      form: {
        title: '', // 问题标题
        content: '', // 问题描述
        selectedUsers: [], // 特别提醒的用户
        tags: [], // 问题标签
      },
      rules: {
        title: [{ required: true, validator: this.$va.issueTitle }],
        content: [{ required: true, validator: this.$va.content }],
      },
      isLoading: false, // 正在提交修改
    };
  },
  computed: {
    ...mapState({ curIssue: 'currentIssue' }),
    spaceId() { return this.$route.params.spaceId; },
    issueId() { return this.$route.params.issueId; },
    // 获取加载问题所需参数
    initLoadParams() {
      return {
        spaceId: this.spaceId,
        issueId: this.issueId,
      };
    },
    // 更新问题所需参数
    initUpdateParams() {
      return {
        spaceId: this.spaceId,
        issueId: this.issueId,
        title: this.form.title.trim(),
        content: this.form.content,
        remindersId: this.form.selectedUsers,
        tags: this.form.tags,
      };
    },
  },
  methods: {
    ...mapActions({ setCurIssue: 'setCurrentIssue' }),
    // 加载问题数据
    loadIssue() {
      this.$api.spaceIssues.show(this.initLoadParams)
        .then((res) => {
          const reIssue = format.formatIssue(res.data);
          this.setCurIssue(reIssue);
          Object.assign(this.form, reIssue);
        })
        .catch((err) => { if (err) this.goBack(); });
    },
    // 提交修改
    onSubmit() {
      this.$refs.issueUpdateForm.validate((valid, errs) => {
        if (valid) {
          this.isLoading = true;
          this.$api.spaceIssues.update(this.initUpdateParams)
            .then((res) => {
              this.$message.success('修改成功');
              const path = `/${this.$rp.SPACES}/${this.spaceId}/${this.$rp.SPACE_ISSUES}/${res.data.id}`;
              this.$root.$emit('routerPush', { path });
            })
            .catch(() => {})
            .then(() => { this.isLoading = false; });
        } else this.$refs[Object.keys(errs)[0]].$el.scrollIntoView({ block: 'center' });
      });
    },
  },
  created() { this.loadIssue(); },
  destroyed() { this.setCurIssue(); },
  watch: {
    initLoadParams() {
      this.setCurIssue();
      this.loadIssue();
    },
  },
};
</script>

<style></style>
